<script>
// 系统管理——父
export default {
  data() {
    return {
      isCollapsed: false,
    };
  },
  computed: {
    menuitemClasses: function() {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
    },
  },
  mounted() {
    this.$router.push('/datasource');
  },
  methods: {
    selectMenu(name) {
      this.$router.push('/' + name);
    },
  },
};
</script>
<template>
  <div>
    <Layout :style="{minHeight: '100vh'}">
      <Sider
        v-model="isCollapsed"
        :collapsed-width="78"
        collapsible
      >
        <Menu
          :class="menuitemClasses"
          active-name="datasource"
          theme="dark"
          width="auto"
          @on-select="selectMenu"
        >
          <MenuItem name="datasource">
          <Icon type="social-buffer" />
          <span>数据源管理</span>
          </MenuItem>
          <MenuItem name="templatemanager">
          <Icon type="android-star" />
          <span>模板管理</span>
          </MenuItem>
          <MenuItem name="timedtask">
          <Icon type="android-time" />
          <span>定时任务</span>
          </MenuItem>
          <MenuItem name="sysconfig">
          <Icon type="settings" />
          <span>系统设置</span>
          </MenuItem>
          <MenuItem name="appearance">
          <Icon type="tshirt" />
          <span>外观设置</span>
          </MenuItem>
          <MenuItem name="versionsfunction">
          <Icon type="ios-help-outline" />
          <span>版本功能</span>
          </MenuItem>
          <MenuItem name="sysfunction">
          <Icon type="ios-gear-outline" />
          <span>系统功能</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Content>
          <Card dis-hover>
            <router-view/>
          </Card>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>


<style lang="less" scoped>
.layout-con {
  height: 100%;
  width: 100%;
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}

.k-layout {
  height: calc(~'100vh');

  .k-layout-content {
    padding: 0 16px 0 16px;

    .k-card {
      margin: 16px 0;
      height: calc(~'90vh');
    }
  }
}
</style>
